<template>
	<div class="content-header">
		<el-scrollbar>
			<el-row style="overflow: auto;">
				<el-card class="card_header">
					<template #header>
						<div>
							<el-avatar :size="64" :src="userInfo.portrait">
							</el-avatar>

						</div>
						<div class="info-nickName">
							<div style="margin-right: 0.3125rem;">{{userInfo.userId}} </div>
							<div>
								<el-tag size="small" type="danger" class="info-tag">
									Lv.6</el-tag>
								<el-tag size="small" class="info-tag">
									资源专家</el-tag>
								<el-tag size="small" type="success" class="info-tag">
									活跃达人</el-tag>
							</div>
						</div>
					</template>
					<el-descriptions title="账号信息" :column="1">
						<template #extra>
							<el-button type="primary" size="small" @click="changeInfoDialogVisible = true">修改
							</el-button>
						</template>
						<el-descriptions-item>
							<template #label>
								<span>
									<svg t="1632912587407" class="icon" viewBox="0 0 1024 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="7554" width="16" height="16">
										<path
											d="M511.808 512c121.344 0 219.84-100.352 219.84-224.128S633.152 63.808 511.808 63.808c-121.408 0-219.84 100.288-219.84 224.064s98.368 224.128 219.84 224.128z m302.848 139.84c-50.24-58.496-67.2-78.656-159.168-84.032h-287.04c-92.032 5.504-108.928 25.536-159.04 84.032-53.376 60.352-95.872 137.024-75.776 231.872 22.4 62.144 82.688 76.416 139.904 76.416H750.592c57.152 0 117.568-14.4 139.968-76.416 19.904-94.848-22.528-171.456-75.904-231.872z"
											p-id="7555" fill="#ffcc66"></path>
									</svg>
								</span>
								用户名：
							</template>
							<span>{{userInfo.userId}}</span>
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<span>
									<svg t="1632912407733" class="icon" viewBox="0 0 1024 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="4765" width="16" height="16">
										<path
											d="M57.2416 279.7568a454.2464 174.3872 0 1 0 908.4928 0 454.2464 174.3872 0 1 0-908.4928 0Z"
											fill="#FFD05C" p-id="4766"></path>
										<path
											d="M57.2416 512.5632a454.2464 174.3872 0 1 0 908.4928 0 454.2464 174.3872 0 1 0-908.4928 0Z"
											fill="#FFD05C" p-id="4767"></path>
										<path
											d="M173.312 396.1344a338.176 57.9584 0 1 0 676.352 0 338.176 57.9584 0 1 0-676.352 0Z"
											fill="#FCA235" p-id="4768"></path>
										<path
											d="M57.2416 745.4208a454.2464 174.3872 0 1 0 908.4928 0 454.2464 174.3872 0 1 0-908.4928 0Z"
											fill="#FFD05C" p-id="4769"></path>
										<path
											d="M173.312 628.992c83.1488 35.584 203.8784 57.9584 338.176 57.9584 134.3488 0 255.0272-22.3744 338.176-57.9584-83.1488-35.584-203.8784-57.9584-338.176-57.9584-134.3488 0-255.0272 22.3744-338.176 57.9584z"
											fill="#FCA235" p-id="4770"></path>
										<path
											d="M247.2448 269.7216a264.2432 85.9648 0 1 0 528.4864 0 264.2432 85.9648 0 1 0-528.4864 0Z"
											fill="#FFFFFF" p-id="4771"></path>
									</svg>
								</span>
								积分：
							</template>
							<span>{{userInfo.integral}}</span>
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<span>
									<svg style="width: 1em; height: 1em;margin-top: 5px;" t="1632912531229" class="icon"
										viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
										p-id="5595" width="16" height="16">
										<path
											d="M861.43 647.14c43.23-65.85 65.16-132 65.16-196.71A283.08 283.08 0 0 0 907.7 348a264.14 264.14 0 0 0-51.36-83.4 237.69 237.69 0 0 0-75.78-55.94 218.81 218.81 0 0 0-186.35 0.83 239.12 239.12 0 0 0-76.59 58 13.57 13.57 0 0 1-20.31 0 239.12 239.12 0 0 0-76.59-58 218.81 218.81 0 0 0-186.35-0.83 237.69 237.69 0 0 0-75.77 55.94 264.14 264.14 0 0 0-51.34 83.4 283.08 283.08 0 0 0-18.89 102.44c0 64.67 22 130.85 65.28 196.7 35.13 53.4 84.24 106.66 146 158.32C391.11 882 483.77 932.37 507.9 945c24.08-12.6 116.55-63 207.83-139.51 61.62-51.69 110.64-104.95 145.7-158.35z m-204.11-54.81a218.68 218.68 0 0 1-78.47 73.53 225.47 225.47 0 0 1-217.07 0 218.68 218.68 0 0 1-78.47-73.54 14 14 0 1 1 23.54-15c35.27 55.4 96.38 88.47 163.47 88.47s128.19-33.07 163.46-88.45a14 14 0 1 1 23.54 15z"
											fill="#FFCC66" p-id="5596"></path>
										<path
											d="M688.19 174.64c-70.94 0-134.92 32.2-180.71 83.83-45.79-51.63-109.77-83.83-180.71-83.83-139.16 0-252 123.48-252 275.8 0 295.68 433.11 509.79 433.11 509.79s432.28-214.11 432.28-509.79c0-152.32-112.81-275.8-251.97-275.8zM299.64 805.45c-61.75-51.65-110.86-104.92-146-158.32-43.32-65.85-65.28-132-65.28-196.7A283.08 283.08 0 0 1 107.26 348a264.14 264.14 0 0 1 51.36-83.4 237.69 237.69 0 0 1 75.77-55.94 218.81 218.81 0 0 1 186.35 0.83 239.12 239.12 0 0 1 76.59 58 13.57 13.57 0 0 0 20.31 0 239.12 239.12 0 0 1 76.59-58 218.81 218.81 0 0 1 186.35-0.83 237.69 237.69 0 0 1 75.78 55.94A264.14 264.14 0 0 1 907.7 348a283.08 283.08 0 0 1 18.89 102.46c0 64.67-21.92 130.85-65.16 196.71-35.06 53.4-84.08 106.66-145.7 158.31C624.44 882 532 932.37 507.9 945c-24.13-12.63-116.79-63-208.26-139.55z"
											fill="" p-id="5597"></path>
										<path
											d="M653 573.07a14 14 0 0 0-19.26 4.27c-35.27 55.39-96.38 88.45-163.46 88.45s-128.2-33.07-163.47-88.47a14 14 0 1 0-23.54 15 218.68 218.68 0 0 0 78.47 73.54 225.47 225.47 0 0 0 217.07 0 218.68 218.68 0 0 0 78.47-73.53 14 14 0 0 0-4.28-19.26z"
											fill="#3399CC" p-id="5598"></path>
									</svg>
								</span>
								兴趣类型：
							</template>
							<el-tag size="small" style="margin-right: 0.125rem;"
								v-for="(tag,index) in userInfo.hobbyList">
								{{tag}}
							</el-tag>
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<span>
									<svg t="1632912692406" class="icon" viewBox="0 0 1024 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="10510" width="16" height="16">
										<path
											d="M149.6 171.8h691.9c47.2 0 85.9 37.7 86.5 83.9L495.7 493 63.5 256c0.4-46.4 38.8-84.2 86.1-84.2z m-86.1 175l-0.4 419.6c0 46.7 38.9 84.9 86.5 84.9h691.9c47.6 0 86.5-38.2 86.5-84.9V346.6L505.9 572.8c-6.5 3.5-14.3 3.5-20.7 0l-421.7-226z"
											p-id="10511" fill="#ffcc66"></path>
									</svg>
								</span>
								邮箱：
							</template>
							<span>{{userInfo.email}}</span>
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<span>
									<svg t="1632913017442" class="icon" viewBox="0 0 1024 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="11600" width="16" height="16">
										<path
											d="M141.064542 1004.146939C71.056379 962.35102 73.146175 974.889796 73.146175 508.865306 73.146175 96.130612 73.146175 85.681633 95.089032 58.514286 140.019644 1.044898 148.378828 0 512.003318 0c370.938776 0 379.297959 1.044898 417.959183 65.828571 19.853061 31.346939 20.897959 55.379592 20.897959 444.081633 0 453.485714 0 453.485714-65.828571 493.191837-31.346939 19.853061-54.334694 20.897959-373.028571 20.897959-312.42449 0-341.681633-2.089796-370.938776-19.853061z m653.061225-163.004082v-26.122449H513.048216c-216.293878 0-282.122449 3.134694-286.302041 13.583674-12.538776 36.571429 0 38.661224 286.302041 38.661224h281.077551v-26.122449z m0-219.428571v-26.122449H513.048216c-216.293878 0-282.122449 3.134694-286.302041 13.583673-12.538776 36.571429 0 38.661224 286.302041 38.661225h281.077551v-26.122449z m0-219.428572v-26.122449H513.048216c-216.293878 0-282.122449 3.134694-286.302041 13.583674-12.538776 36.571429 0 38.661224 286.302041 38.661224h281.077551v-26.122449zM501.554338 182.857143v-26.122449H366.762501c-99.265306 0-136.881633 3.134694-140.016326 13.583673-11.493878 34.481633 4.179592 38.661224 140.016326 38.661225h134.791837v-26.122449z"
											p-id="11601" fill="#ffcc66"></path>
									</svg>
								</span>
								个人简介：
							</template>
							<span>{{userInfo.personalIntroduction}}</span>
						</el-descriptions-item>
					</el-descriptions>


					<el-empty description="暂无个人信息" v-show="infoStatus"></el-empty>


					<div>
						<el-dialog v-model="changeInfoDialogVisible" width="40%" :append-to-body="true"
							close-on-click-modal destroy-on-close @closed="handleDialogClose">
							<template #title>
								<span>修改信息</span>
							</template>
							<div>
								<el-form label-width="100px" :model="oprateUserInfo" label-position="right">
									<!-- 头像上传部分的div层 -->
									<div style="display: flex;justify-content: center;align-items: center;">
										<el-upload class="avatar-uploader" action="http://localhost:8080/"
											:show-file-list="false" :on-success="handleAvatarSuccess"
											:before-upload="beforeAvatarUpload">
											<img v-if="imageUrl" :src="imageUrl" class="avatar" />
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
										<el-divider direction="vertical" style="height: 6.25rem;"></el-divider>
										<img class="avatar-now" :src="oprateUserInfo.portrait" />
									</div>
									<el-form-item label="用户名">
										<span style="font-size: 18px;color: gray;">{{oprateUserInfo.userId}}</span>
									</el-form-item>
									<el-form-item label="邮箱">
										<el-input v-model="oprateUserInfo.email" clearable></el-input>
									</el-form-item>
									<el-form-item label="兴趣爱好">
										<el-select v-model="oprateUserInfo.hobby" value-key="id" placeholder="选择你的兴趣标签"
											multiple clearable filterable
											style="width: 100%; margin-right: 16px; vertical-align: middle">
											<el-option-group v-for="group in allTags" :key="group.lable"
												:label="group.lable">
												<el-option v-for="item in group.options" :key="item.value"
													:label="item.label" :value="item.value">
												</el-option>
											</el-option-group>
										</el-select>
									</el-form-item>
									<el-form-item label="个人简介">
										<el-input v-model="oprateUserInfo.personalIntroduction"
											:autosize="{ minRows: 2, maxRows: 6 }" type="textarea" placeholder="个人简介"
											clearable>
										</el-input>
									</el-form-item>
									<el-form-item style="text-align: right;">
										<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
									</el-form-item>

								</el-form>
							</div>
						</el-dialog>
					</div>
				</el-card>
			</el-row>
		</el-scrollbar>
	</div>
</template>

<script lang="ts">
	import {
		ref
	} from 'vue'
	import tags from '@/resource/tags.json'
	export default {
		setup() {
			return {
				textarea: ref(''),
			}
		},
		created() {
			this.userInfo = JSON.parse(localStorage.getItem('pg_userInfo'));
			this.oprateUserInfo = JSON.parse(JSON.stringify(this.userInfo));
		},
		data() {
			return {
				infoStatus: false,
				changeInfoDialogVisible: false,
				imageUrl: '',
				oprateUserInfo: [],
				InfoValue: ['Java', 'C语言'],
				allTags: tags,
				userInfo: {},

			}
		},
		methods: {
			handleDialogClose() {
				this.oprateUserInfo = JSON.parse(JSON.stringify(this.userInfo));

			},
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
				console.log(this.imageUrl);
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png')
				const isLt2M = file.size / 1024 / 1024 < 2

				if (!isJPG) {
					this.$message.error('只允许上传JPEG/JPG/PNG格式的图片!')
				}
				if (!isLt2M) {
					this.$message.error('图片大小不能超过2MB!')
				}
				return isJPG && isLt2M
			},
		}

	}
</script>

<style>
	.avatar-now {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		position: relative;
		overflow: hidden;
		width: 150px;
		height: 150px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 150px;
		height: 150px;
		line-height: 150px !important;
		text-align: center;
	}

	.avatar {
		width: 150px;
		height: 150px;
		display: block;
	}

	.avatar-cover {
		position: absolute;
		top: 0;
		left: 0;
		width: 64px;
		height: 64px;
		background: rgba(0, 0, 0, .6);
		font-size: 12px;
		color: #fff;
		line-height: 64px;
		text-align: center;
		opacity: 0;
		border-radius: 50%;
		transition: opacity .2s;
	}

	.icon {
		width: 1em;
		height: 1em;
		margin-top: 5px;
	}

	.info-nickName {
		color: #5a5a5a;
		font-size: 18px;
		margin-top: 0.3125rem;
		font-weight: 600;
		font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
			'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
	}

	.info-tag {
		margin: 0.3125rem 0.125rem 0 0;
		font-weight: 600;
		font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
			'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
	}

	.image_avatar {
		border-radius: 50%;
	}

	.card-page {
		width: -webkit-fill-available;
		cursor: default !important;
		margin: 0 0.9375rem 0 0.9375rem;
		border-radius: 0.3125rem;
	}



	.container {
		position: relative;
		display: flex;
		flex-flow: row wrap;
		overflow: auto;
	}

	.card_child {
		margin: 10px;
		cursor: pointer;
	}

	.card-list {
		margin-top: 0px !important;
		height: 100%;
		box-sizing: border-box;
		cursor: default !important;
		text-align: left;
	}

	.card_content {
		padding: 10px;
		color: #999999;
		font-size: 14px;
		text-align: center;
	}

	.card_content_time {
		/* padding: 10px; */
		color: #999999;
		font-size: 13px;
		text-align: left;
	}



	.content-header {
		display: flex;
		flex-grow: 1;
		margin: 0 5px 0 5px;
		flex-direction: column;
		/* flex-wrap: wrap; */
		/* background-color: #FFF; */
	}


	.card-lable {
		display: flex;
		align-items: stretch;
		text-align: center;
		height: 100%;
	}

	.card-lable-content {
		display: flex;
		align-items: auto;
		text-align: left;
		margin-bottom: 1.25rem;
		/* height: 100%; */
	}

	.grid-content {
		margin-bottom: 0.9375rem;
		border-radius: 4px;
		min-height: 30px;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.card-control {
		margin: 0.3125rem 0 0.3125rem 0;
		width: -webkit-fill-available;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.card_header {
		height: max-content;
		width: 100%;
	}

	/* .el-page-header__left{
		width: 0;
		display: none;
	} */
</style>
